<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户ID">
      <el-input v-model="pageHelper.userId" placeholder="请输入用户ID" clearable />
    </el-form-item>
    <el-form-item label="商品类型">
      <el-select
        v-model="pageHelper.categoryId"
        placeholder="请选择商品类型"
        clearable
      >
        <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="SpuID">
      <el-input v-model="pageHelper.spuId" placeholder="请输入SpuID" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>



    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="商品图片" prop="skuPicture">
            <template v-slot:default="{ row }">
                <img :src="row.skuPicture" style="width: 130px; " />
            </template>
        </el-table-column>
        <el-table-column label="商品名" prop="skuName" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="收货人" prop="consignee" />
        <el-table-column label="手机号" prop="phoneNumber" />
        <el-table-column label="地址" prop="detailAddress" />
        <el-table-column label="数量" prop="num" />
        <el-table-column label="下单时间" prop="createTime" :formatter="formatDateTime" />
        <el-table-column label="支付状态" prop="payFlag">
            <template v-slot:default="{ row }">
                <span v-if="row.payFlag === 1">已支付</span>
                <span v-if="row.payFlag === 0">未支付</span>
            </template>
        </el-table-column>
        <el-table-column label="状态" prop="status">
            <template v-slot:default="{ row }">
                <span v-if="row.status === 1 && row.payFlag === 0">未删除</span>
                <span v-if="row.status === 0 && row.payFlag === 0">已删除</span>
                <span v-if="row.status === 1 && row.payFlag === 1">正常</span>
                <span v-if="row.status === 0 && row.payFlag === 1">正常</span>
            </template>
        </el-table-column>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">


                <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
                    title="Are you sure to delete this?" @confirm="handleDelete(scope.$index, scope.row)"
                    @cancel="cancelEvent">
                    <template #reference>
                        <el-button size="small" type="danger"
                            v-if="scope.row.payFlag === 0 && scope.row.status === 1">删除订单</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="pageHelper.total" v-model:current-page="pageHelper.pageNum"
        v-model:page-size="pageHelper.pageSize" @current-change="getAllOrders" />


        <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import api from '@/api'
import { ElNotification } from 'element-plus';
import { useRouter } from 'vue-router';
import { InfoFilled } from '@element-plus/icons-vue'

const router = useRouter()

const cancelEvent = () => {
    console.log('cancel!')
}

const search = ref('')
const filterTableData = computed(() =>
    ordersList.value.filter(
        (data) =>
            !search.value ||
            data.skuName.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index: number, row: any) => {
    router.push({
        name: 'orderspay',
        params: {
            id: row.id
        }
    });
}
const handleDelete = (index: number, row: any) => {
    api.orders.deleteOrdersById({ id: row.id })
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            getAllOrders()
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })


        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

const ordersList = ref([
    {
        id: '',
        skuName: '',
    }
])

onMounted(() => {
    getAllOrders()
    getCategoryList()
})

const pageHelper = ref({
    pageNum: 1,
    pageSize: 2,
    userId: '',
    orderNumber: '',
    spuId: '',
    total: '',
    categoryId:''
})

function getAllOrders() {
    api.orders.getAllOrders(pageHelper.value)
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            console.log(response.data.data)
            ordersList.value = response.data.data.records
            pageHelper.value.total = response.data.data.total
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

function formatDateTime(rowData: any) {
    const createTime = rowData.createTime;
    const date = new Date(createTime);
    return date.toLocaleString();
}


const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
    getAllOrders()
}

const categoryList = ref([
  {
    id:'',
    name: ''
  }
])

function getCategoryList(){
  api.shop.getCategoryList()
  .then(response => {
    categoryList.value = response.data.data
    })
    .catch(error => {
      ElNotification({
        title: 'Error',
        message: error.data.msg,
        type: 'error',
        duration: 1500
      })
    });
}

function resetForm(){
    pageHelper.value.categoryId=''
    pageHelper.value.userId=''
    pageHelper.value.spuId=''
    getAllOrders()
}



const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const gridData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-03',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>